<template>
  <div
    :class="className"
    :style="{height: height, width: width}"
  />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import ResizeMixin from './mixins/resize'

export default {
  name: 'IotOneLineChart',
  mixins: [ResizeMixin],
  props: {
    chartData: {
      required: true
    },
    className: {
      default: 'chart'
    },
    width: {
      default: '100%'
    },
    height: {
      default: '340px'
    }
  },
  watch: {
    chartData: {
      handler: function(value) {
        this.setOptions(value)
      },
      deep: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.$nextTick(() => {
        this.initChart()
      })
    }, 500)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(chartData) {
      if (this.chart) {
        this.chart.setOption({
          xAxis: {
            type: 'category',
            data: chartData['xdata'],
          },
          yAxis: {
            splitLine:{
              lineStyle:{
                type: 'dashed'
              },
              show:true
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 30,
            top: 20,
            containLabel: true
          },
          legend: {
            bottom: 0,
            itemWidth: 6,
            itemGap:20,
            icon:"circle",
            data: ['异常趋势'],
          },
          tooltip: {
            trigger: 'axis',
            axisPointer:{
              lineStyle:{
                width: 0
              }
            },
            backgroundColor: 'rgb(255, 255, 255, 0.8)',
            shadowColor: 'rgb(0, 0, 0, 0.8)',
            shadowBlur: 10,
            padding: 10,
            textStyle:{
              color: '#666',
            },
            extraCssText: 'box-shadow: 0 0 10px rgba(150, 150, 150, 0.4)'
          },
          series: [{
            name: '异常趋势',
            showSymbol:false,
            itemStyle: {
              color: '#FF005A',
            },
            lineStyle: {
              color: '#FF005A',
              width: 3,
              shadowColor: 'rgba(222,115,127,0.5)',
              shadowBlur: 10,
              shadowOffsetX: 10,
              shadowOffsetY: 10
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(222,115,127,0.23)' },
                  {offset: 0.5, color: 'rgba(255,255,255,0.23)'}]
                )
              }
            },
            smooth: true,
            type: 'line',
            data: chartData['series'],
            animationDuration: 2800,
            animationEasing: 'cubicInOut'
          }
          ]
        })
      }
    }
  }
}
</script>
